<template>
	<div class="monitoringContent">
		<Header></Header>
		<div class="middleContent">
			<div class="treeContent" style="position: relative">
				<div class="nodeBox" @contextmenu.prevent="openMenu($event)" @click="handleLeftclick">
					<div class="nodeTerminal" v-for="(item, index) in terminalList" :key="index" :id="item.id">
						{{ item.name }}
					</div>
				</div>
				<el-card class="box-card" ref="card" v-show="menuVisible">
					<div class="add" @click="bindEvent"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;绑定终端</div>
					<div class="delete" @click="relieveEvent"><i class="el-icon-remove-outline"></i>&nbsp;&nbsp;解除终端</div>
				</el-card>
			</div>
			<div class="mainContent mainContentMap">
				<div class="mapbg" @dblclick="handleGetCoord($event)">
					<div
						v-for="(item, index) in pointList"
						:key="index"
          >
            <div style="position: relative; display: inline-block; text-align: center;">
              <span :style="{
            color: 'red',
            fontSize: 'small',
            position: 'absolute',
            top: item.coordY - 20 + 'px',
            left: item.coordX + 'px',
            whiteSpace: 'nowrap',
          }">{{ item.name }}</span>
              <i v-html="iconSvg" :style="{position: 'absolute',top: item.coordY + 'px',left: item.coordX + 'px'}"></i>
            </div>
					</div>
					<wj-Button type="save" style="position: absolute; right: 150px; bottom: 20px" @click="backCoord"> 返回 </wj-Button>
					<wj-Button type="save" style="position: absolute; right: 20px; bottom: 20px" @click="saveCoord"> 保存配置 </wj-Button>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<script>
import Header from "@/views/common/Header";
import Footer from "@/views/common/Footer";
import { terminal_all_site, terminal_map_bind, get_map_base64 } from "@/utils/request/api";
export default {
	name: "MapCoord",
	components: {
		Header,
		Footer,
	},
	data() {
		return {
			// 右击显示卡片列表
			menuVisible: false,
			// 终端集合
			terminalList: [],
			// 每次右击保存终端id和name
			menuObj: {},
			// 绑定后地图上的点的集合
			pointList: [],
      iconSvg: `
        <svg t="1730448812453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1591" width="40" height="40">
          <path d="M501.097 819.37l11.466 11.807 11.469-11.807c0.717-0.717 71.434-73.667 141.172-163.211 95.188-122.172 143.47-216.060 143.47-279.039 0-73.71-31.012-142.91-87.29-194.842-55.839-51.571-130.027-79.971-208.822-79.971-78.814 0-152.979 28.399-208.82 79.97-56.299 51.933-87.291 121.133-87.291 194.842 0 62.979 48.282 156.867 143.468 279.039 69.741 89.545 140.458 162.495 141.177 163.212zM512.561 277.126c56.38 0 102.268 46.546 102.268 103.743 0 57.235-45.888 103.78-102.268 103.78-56.377 0-102.266-46.546-102.266-103.78 0-57.197 45.889-103.743 102.266-103.743zM686.902 753.717l-25.627 25.607c16.793 10.81 26.722 22.895 26.722 34.543 0 32.986-76.142 69.837-178.068 69.837-101.927 0-178.069-36.852-178.069-69.837 0-12.724 11.548-25.967 31.33-37.534l-23.214-27.359c-27.142 17.628-43.077 39.965-43.077 64.853 0 60.028 91.557 105.298 213.030 105.298 121.472 0 213.009-45.231 213.009-105.298-0.038-22.656-13.162-43.278-36.035-60.109z" fill="#d81e06" p-id="1592"></path>
        </svg>`
		};
	},
	created() {},
	mounted() {
		this.getTerminal();
		// document.querySelector(".mapbg").style.backgroundImage =
		this.getMapBase64();
	},
	methods: {
		// 鼠标右击事件
		openMenu(e) {
			console.log(e);
			this.menuVisible = true;
			document.addEventListener("click", this.foo);
			this.$refs.card.$el.style.left = e.clientX + 40 + "px";
			this.$refs.card.$el.style.top = e.clientY - 55 + "px";
			this.menuObj.id = e.target.id;
			this.menuObj.name = e.target.innerText;
		},
		// 鼠标左击事件
		handleLeftclick() {
			this.foo();
		},
		//  取消鼠标监听事件 菜单栏
		foo() {
			this.menuVisible = false; //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
			document.removeEventListener("click", this.foo);
		},
		// 绑定事件
		bindEvent() {
			console.log(this.menuObj);
		},
		// 解绑事件
		relieveEvent() {
			this.pointList.forEach((item, index) => {
				if (item.id == this.menuObj.id) {
					this.pointList.splice(index, 1);
				}
			});
		},
		// 双击获取地图坐标
		handleGetCoord(e) {
      const mapBgElement = e.currentTarget;
      const rect = mapBgElement.getBoundingClientRect();
      const coordX = Math.floor(e.clientX - rect.left);
      const coordY = Math.floor(e.clientY - rect.top);

			let result = this.pointList.find((ele) => ele.id === this.menuObj.id);
			if (!result) {
				// 没找到才添加
        this.pointList.push({id: this.menuObj.id, name: this.menuObj.name, coordX: coordX, coordY: coordY});
			}
		},
		// 保存终端和地图绑定的数据
		saveCoord() {
			if (this.pointList.length > 0) {
				this.pointList.map((item) => {
					item.mapCoord = item.coordX + "," + item.coordY;
				});
				console.log(this.pointList);
				terminal_map_bind({
					terminals: this.pointList,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("配置保存成功！");
					} else {
						this.$msg.error("配置保存失败！");
					}
				});
			} else {
				this.$msg.error("请先进行终端和地图坐标绑定操作！");
			}
		},
		// 返回上一级
		backCoord() {
			history.back();
		},
		// 获取所有终端
		getTerminal() {
			terminal_all_site().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.terminalList = res.data;
					this.pointList = [];
					this.terminalList.forEach((item) => {
						if (item.mapCoord && item.mapCoord != ",") {
							this.pointList.push({
								id: item.id,
								name: item.name,
								coordX: item.mapCoord.split(",")[0],
								coordY: item.mapCoord.split(",")[1],
							});
						}
					});
					console.log(this.pointList);
					// this.pointList
				} else {
					this.$msg.error("终端获取失败！");
				}
			});
		},
		// 获取地图base64
		getMapBase64() { 
			get_map_base64().then((res) => { 
				console.log(res)
				if (res.code == 200) {
					document.querySelector(".mapbg").style.backgroundImage = 'url(' + 'data:image/jpeg;base64,' + res.data + ')'
				} else { 
					this.$msg.error("地图获取失败！");
				}
			})
		},
	},
};
</script>
<style lang="less" scoped>
.monitoringContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.middleContent {
		width: 100%;
		height: calc(100% - 68px - 68px);
		box-sizing: border-box;
		padding: 2px 0 0;
		background: #f2f2f2;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.treeContent {
			width: 14%;
			height: 100%;
			/*overflow: hidden;*/
			.nodeBox {
				width: 107%;
				height: 100%;
				background: #fff;
				overflow-y: scroll;
				.nodeTerminal {
					width: 85%;
					height: 58px;
					line-height: 58px;
					text-align: center;
					background: #eee;
					margin: 0 auto 12px;
					box-sizing: border-box;
				}
				.nodeTerminal:last-child {
					margin-bottom: 0;
				}
				.nodeTerminal:first-child {
					margin-top: 12px;
				}
				.nodeTerminal:hover {
					cursor: pointer;
				}
			}
			.box-card {
				width: 150px;
				position: absolute;
				z-index: 1000;
				.add {
					cursor: pointer;
					margin-top: 10px;
				}

				.delete {
					margin: 10px 0;
					cursor: pointer;
				}
			}
			/deep/.el-card__body {
				padding: 10px !important;
				> div {
					padding-bottom: 10px;
					border-bottom: 1px solid #ccc;
					&:hover {
						color: #a8d55f;
					}
				}
			}
		}
		.mainContent {
			width: calc(86% - 2px);
			height: 100%;
			margin-left: 2px;
			background: #fff;
			overflow: scroll;
			.mainContentScroll {
				width: 101%;
				height: 100%;
				overflow-y: scroll;
			}
		}
	}
	.mainContentMap {
		.mapbg {
			width: 1649px;
			height: 809px;
			/*background-image: url("../../../assets/icon/monitorBg.png");*/
			background-size: 1649px 809px;
			background-position: center center;
			background-repeat: no-repeat;
			position: relative;
			.mapBoard {
				padding: 12px 18px;
				background: #000000;
				position: absolute;
				top: 700px;
				left: 140px;
				text-align: center;
				font-size: 18px;
				overflow: hidden;
			}
			.spancontent {
				display: inline-block;
				white-space: nowrap;
				animation: 10s wordsLoop linear infinite normal;
			}
			.mapBoard_success {
				color: rgba(0, 255, 0);
			}
			.mapBoard_Danger {
				color: rgba(255, 0, 0);
			}
			.mapBoard_approve {
				color: rgba(255, 255, 0);
			}
			@keyframes wordsLoop {
				0% {
					transform: translateX(200px);
					-webkit-transform: translateX(200px);
				}

				100% {
					transform: translateX(-100%);
					-webkit-transform: translateX(-100%);
				}
			}

			@-webkit-keyframes wordsLoop {
				0% {
					transform: translateX(200px);
					-webkit-transform: translateX(200px);
				}

				100% {
					transform: translateX(-100%);
					-webkit-transform: translateX(-100%);
				}
			}
		}
	}
}
</style>
